<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="../lib/vue.js"></script>
    <div id="app">
      <ul>
        <li>
          <span @click="toggle(1)">学习时间</span>
          <div v-show="show===1">
            8:30-12:10<br />
            专业知识技能课<br />
            14:40-16:20<br />
            综合素质课堂
          </div>
          <br />
        </li>
        <li>
          <br />
          <span @click="toggle(2)">放假学习时间</span>
          <div v-show="show===2">
            9:30-11:30<br />
            专业知识技能课<br />
            13:00-16:00<br />
            午休<br />
            16:20-18:20<br />
            专业课学习<br />
          </div>
        </li>
        <li>
          <br />
          <span @click="toggle(3)">放假休闲时间</span>
          <div v-show="show===3">
            9:30<br />
            起床<br />
            9:40<br />
            洗衣服<br />
            买菜<br />
            洗菜<br />
            12:00<br />
            午饭<br />
            14:00<br />
            午休<br />
            16:00<br />
            起床<br />
            19:00<br />
            晚饭<br />
            20:00 <br />
            复习代码
          </div>
        </li>
      </ul>
    </div>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            show: '',
          }
        },
        methods: {
          toggle: function (index) {
            if (this.show === index) {
              this.show = 0
            } else {
              this.show = index
            }
          },
        },
      })
    </script>
  </body>
</html>
